<template>
  <div class="image-progress-container">
    <el-row>
      <el-form ref="form"
               :model="requestParam"
               label-width="100px">
        <el-col :span="8">
          <el-form-item label="项目名称">
            <el-select v-model="requestParam.project_id"
                       placeholder="请选择项目">
              <el-option v-for="item in projectList"
                         :key="item.project_id"
                         :label="item.project_name"
                         :value="item.project_id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="模板名称">
            <el-input v-model="requestParam.image_name"
                      placeholder="请输入模板名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8"
                class="flex-end">
          <el-button @click="search"
                     type="primary">搜索</el-button>
          <el-button @click="reset">重置</el-button>
          <el-button @click="editTemplate('create',{})"
                     type="primary">新增模板</el-button>
        </el-col>
      </el-form>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table :data="templateList.list"
                  height="500"
                  class="show-table-style"
                  :header-cell-style="{background:'#f5f5f5'}">
          <el-table-column type="index">
          </el-table-column>
          <el-table-column prop="image_name"
                           label="模板名称"
                           align="center"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="project_name"
                           label="项目名称"
                           align="center"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="num"
                           label="配置节点数量"
                           align="center"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="updated_at"
                           label="更新时间"
                           align="center"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="remark"
                           label="备注"
                           align="center"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="操作"
                           align="center">
            <template slot-scope="scope">
              <el-button @click="configNode(scope.row)"
                         type="text">配置</el-button>
              <el-button @click="editTemplate('update',scope.row)"
                         type="text">修改</el-button>
              <el-button @click="deleteTemplate(scope.row)"
                         type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @current-change="handlePageChange"
                       :current-page="requestParam.page"
                       :page-size="requestParam.page_size"
                       layout="total,sizes,prev, pager, next, jumper"
                       background
                       :total="templateList.total_count"
                       align="center">
        </el-pagination>
      </el-col>
    </el-row>
    <EditTemplateDialog :dialogVisible.sync="editTemplateDialogVisible"
                        :dialogStatus="editTemplateDialogStatus"
                        :dialogForm="editTemplateDialogForm"
                        @callback="editTemplateCb"></EditTemplateDialog>
  </div>
</template>

<script>
import { ImageProgressApi } from '@/services/WorkCenter'
import EditTemplateDialog from '@/pages/workCenter/ImageProgress/components/EditTemplateDialog'
export default {
  components: {
    EditTemplateDialog
  },
  data () {
    return {
      requestParam: {
        project_id: '',
        image_name: '',
        is_page: 1,
        page: 1,
        page_size: 10
      },
      resetParam: {
        image_name: '',
        is_page: 1,
        page: 1,
        page_size: 10
      },
      projectList: [],
      choosedProject: {},
      templateList: {
        list: [],
        page: 1,
        total_count: 0
      },
      // 编辑模板弹框是否可见
      editTemplateDialogVisible: false,
      // 编辑模板弹框状态
      editTemplateDialogStatus: 'create',
      // 编辑模板弹框数据
      editTemplateDialogForm: {}
    };
  },
  watch: {
    '$store.state.choosedProject': function (val) {
      this.projectList = [val]
      this.requestParam.project_id = val.project_id
      this.getTemplateList()
    }
  },
  props: {

  },
  computed: {

  },
  methods: {
    configNode (row) {
      this.$router.push({
        path: '/imageProgressNode',
        query: {
          id: row.image_id
        }
      })
    },
    deleteTemplate (row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.deleteTemplateApi(row.image_id)
        })
        .catch(() => {

        })
    },
    deleteTemplateApi (id) {
      ImageProgressApi.deleteTemplate({
        data: {
          image_id: id
        }
      }).then(res => {
        if (res.code === 0) {
          this.$message.success('删除成功')
          this.getTemplateList()
        }
      })
    },
    editTemplateCb () {
      this.getTemplateList()
    },
    editTemplate (type, data) {
      this.editTemplateDialogStatus = type
      this.editTemplateDialogForm = data
      this.editTemplateDialogVisible = true
    },
    handlePageChange (page) {
      this.requestParam.page = page
      this.getTemplateList()
    },
    search () {
      this.requestParam.page = 1
      this.getTemplateList()
    },
    reset () {
      let reset = JSON.parse(JSON.stringify(this.resetParam))
      this.requestParam = Object.assign(this.requestParam, reset)
      this.getTemplateList()
    },
    // 获取模板列表
    getTemplateList () {
      ImageProgressApi.getTemplateist({
        params: this.requestParam
      }).then(res => {
        if (res.code === 0) {
          this.templateList = res.data
        }
      })
    }
  },
  created () {

  },
  mounted () {
    let store = this.$store.state.choosedProject
    let local = window.localStorage.getItem('choosedProject') || '{}'
    this.choosedProject = store.project_id ? store : JSON.parse(local)
    this.projectList = [this.choosedProject]
    this.requestParam.project_id = this.choosedProject.project_id
    this.getTemplateList()
  },
};
</script>

<style scoped lang="scss">
.image-progress-container {
  padding: 20px;
  .el-select,
  .el-input {
    width: 100%;
  }
  .el-pagination {
    margin-top: 20px;
  }
}
</style>
